<template>
  <div class="order">
      <!-- 导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
      <!-- 视图 -->
    <el-card class="box-card">
      <el-row :gutter='20'>
       <el-col :span="8">
         <!-- 搜索 -->
          <el-input placeholder="请输入内容" clearable>
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
       </el-col>
        <el-col :span="4">
          <!-- <el-button type='primary' @click="dialogVisible=true">添加用户</el-button> -->
       </el-col>
      </el-row>
      <!-- 订单列表数据 -->
        <el-table :data='orderList' border stipre>
        <el-table-column type='index'></el-table-column>
        <el-table-column label='订单编号' prop='order_number'></el-table-column>
         <el-table-column label='订单价格' prop='order_price' ></el-table-column>
          <el-table-column label='是否付款' prop='pay_status' >
            <template slot-scope="scope">
              <el-tag type='primary' v-if='scope.row.pay_status==="1"'>已付款</el-tag>
              <el-tag type='danger' v-else>未付款</el-tag>
            </template>
          </el-table-column>
           <el-table-column label='是否发货' prop='is_send' >
           </el-table-column>
            <el-table-column label='下单时间'  prop='create_time' width='130px'>
              <template slot-scope="scope"> 
                {{scope.row.create_time | dataFormat}}
              </template>
            </el-table-column>
            <el-table-column label='操作' width='130px'>
                <template slot-scope="scope">
                <el-button icon='el-icon-edit' type='primary' size="mini" @click="showbox"></el-button>
                <el-button icon='el-icon-location' type='success' size="mini" @click="showlocation"></el-button>    
              </template>
            </el-table-column>
      </el-table>
      <!-- 分页 -->
       <el-pagination @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page="queryInfo.pagenum" :page-sizes="[5, 10, 15, 20]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
    <!-- 修改地址对话框 -->
    <el-dialog title="修改地址" :visible.sync="editaddressVisible" width="50%" @close='closedialog'>
       <el-form :model="editaddressForm" :rules="editaddressrules" ref="editaddressRef" label-width="100px" class="demo-ruleForm">
       <el-form-item label="省市区/县" prop="address1">
         <el-cascader v-model="editaddressForm.address1" :options="cityData" :props="cascaderProps" clearable  style="width:100%">
                </el-cascader>
       </el-form-item>
       <el-form-item label="详细地址" prop="address2">
         <el-input v-model="editaddressForm.address2"></el-input>
       </el-form-item>
      </el-form>
        <span slot="footer" class="dialog-footer">
         <el-button @click="editaddressVisible = false">取 消</el-button>
        <el-button type="primary" @click="editaddressVisible = false">确 定</el-button>
       </span>
   </el-dialog>
   <!-- 物流进度对话框 -->
   <el-dialog title="物流" :visible.sync="locationVisible" width="50%">
     <!-- 时间线 -->
       <el-timeline>
          <el-timeline-item v-for="(item, index) in location" :key="index" :timestamp="item.time"> {{item.context}}
         </el-timeline-item>
       </el-timeline>
    </el-dialog>
  </div>
</template>

<script>
import cityData from './citydata.js'
export default {
data(){
  return{
     queryInfo:{
       query:'',
       pagenum:1,
       pagesize:10
     },
     orderList:[],
     total:0,
     editaddressVisible:false,
     editaddressForm:{
       address1:[],
       address2:''
     },
     editaddressrules:{
       address1:[ { required: true, message: '请选择地址', trigger: 'blur' },],
       address2:[ { required: true, message: '请输入地址', trigger: 'blur' },],
     },
     cityData,
     cascaderProps:{

     },
     locationVisible:false,
     location:[],
    
  }
},
created(){
this.getOrderList()
},
methods:{
  //获取订单列表
async getOrderList(){
  let {data:res} = await this.$http.get('orders',{params:this.queryInfo})
  if (res.meta.status !==200) {
    return this.$message.error('获取订单失败')
  }
  this.orderList = res.data.goods
  this.total = res.data.total
 // console.log(this.orderList)
},
/* size变化 */
handleSizeChange(newsize){
this.queryInfo.pagesize = newsize
tihs.getOrderList()
},
handleCurrentChange(newpage){
  this.queryInfo.pagenum = newpage
  this.getOrderList()
},
//展示修改地址的对话框
showbox(){
 this.editaddressVisible = true
},
/* 关闭对话框 */
closedialog(){
 this.$refs.editaddressRef.resetFields()
},
//展示物流的对话框
async showlocation(){
  let {data:res} = await this.$http.get(`/kuaidi/${1106975712662}`)
  if (res.meta.status !==200) {
    return this.$message.error('获取物流失败')
  }
this.location = res.data
this.locationVisible = true
//console.log(this.location)
}
},
}
</script>

<style lang="less" scoped>
@import '../../plugins/timeline/timeline.css';
@import '../../plugins/timeline-item/timeline-item.css';

</style>